<script lang="ts" setup>
import { computed } from "vue"

const props = defineProps({
  eq: {
    type: Object,
    default: () => undefined
  },
  pps: {
    type: Array as PropType<{ attack: number; buff: number; props: string[]; type: number; order?: number; filter?: string; abbr?: string }[]>,
    default: () => []
  }
})

const sumAttack = computed(() => {
  return (props.pps).length > 0 ? props.pps.reduce((sum, b) => sum + b.attack, 0) : props.eq?.prop.growthProps.reduce((sum: number, b: any) => sum + b.attack, 0);
})

const sumBuff = computed(() => {
  return (props.pps).length > 0 ? props.pps.reduce((sum, b) => sum + b.buff, 0) : props.eq?.prop.growthProps.reduce((sum: number, b: any) => sum + b.buffer, 0);
})

const type = (type: number) => {
  if (type == 9) {
    return "普通"
  }
  if (type == 10) {
    return "困难"
  }
  if (type == 1) {
    return "公共"
  }
  if ([2, 3, 4, 5, 6, 7, 8].includes(type)) {
    return "部位"
  }
  return "专属"
}
</script>

<template>
  <view v-if="props.eq">
    <view>
      <view class="hr" />
      <view v-if="props.eq.name.includes('焚烬龙焰')" class="green" decode="true">
        ﹤融合属性﹥
      </view>
      <view v-else class="green" decode="true">
        ﹤成长属性﹥
      </view>
      <view v-if="!props.eq.name.includes('焚烬龙焰') && (sumAttack > 0 || sumBuff > 0)">
        <view v-if="sumAttack > 0">
          攻击强化 {{ sumAttack.toFixed(1) }}%
        </view>
        <view v-if="sumBuff > 0">
          Buff量 {{ sumBuff }}
        </view>
      </view>
    </view>
    <template v-if="props.pps.length > 0">
      <view v-for="(x, i) in props.pps" :key="i">
        <view v-if="x && x.id > 0" style="padding-top: 5px">
          <view class="flex items-center my-5px">
            <view class="yellow mr-5px">
              [{{ type(x.type) }}]
            </view>
            <EqPropNumRender :p="x" />
          </view>
          <view v-for="(p, j) in x.props " :key="j" class="strong">
            {{ p }}
          </view>
        </view>
      </view>
    </template>
    <view v-if="props.eq.prop.growthProps && props.eq.prop.growthProps.length > 0">
      <view
        v-for="(p, i) in props.eq.prop.growthProps"
        :key="i"
        :style="(p.props?.[0] ?? '').indexOf('-') == 0 ? '' : 'padding-top: 10px'"
      >
        <template v-if="p.props && p.props.length > 0">
          <!-- <view class="yellow">
            <span>属性{{ i + 1 }}</span>
            <span v-if="eq.groupId != 4"> - Lv1 (EXP 0.00%)</span>
          </view> -->
          <!-- <EqPropNumRender :p="p" /> -->
          <view v-for="(s, j) in p.props" :key="j" class="strong">
            <span v-html="s.replaceAll(/@([^@]*)@/g, (m:string) => `<span style='color:#b59834'>${m.slice(1, -1)}</span>`)" />
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style src="../css/eq-info.scss" scoped></style>
